<template>
	<view class="page">
		<!--页面内容部分 -->
		<view class="content">
			<view class="partOne">
				<image src="~@/static/image/header.jpg" style="width:100vw" mode="widthFix"></image>
			</view>
			<view class="partTwo">
				<uni-icons type="refreshempty" size=25></uni-icons>
				<view class="up">
					{{userInfo.name}}<br>
					{{userInfo.idCard}}
				</view>
				<view class="center">
					<view class="time">{{time}}</view>
					<view class="date">{{date}}</view>
				</view>
				<view class="down">
					<image v-bind:src="codeSrc" style="width:60vw; margin:2vh 10vw"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/api.js'

	export default {
		onLoad() {
			let that = this
			request('/hcode').then(resp => {
				that.codeSrc = "data:image/gif;base64," + resp.img
			}).catch(err => {
				console.log(err);
			})
		},
		beforeMount() {
			let that = this
			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					that.userInfo.name = res.data.name
					let idCard = res.data.idCard
					let substr = idCard.substr(6, 8)
					idCard = idCard.replace(substr, "xxxxxxxx")
					that.userInfo.idCard = idCard
				}
			})
		},
		mounted() {
			Date.prototype.Format = function(fmt) { // author: meizz
				var o = {
					"M+": this.getMonth() + 1, // 月份
			 	"d+": this.getDate(), // 日
					"h+": this.getHours(), // 小时
					"m+": this.getMinutes(), // 分
					"s+": this.getSeconds(), // 秒
					"q+": Math.floor((this.getMonth() + 3) / 3), // 季度
					"S": this.getMilliseconds() // 毫秒
				};
				if (/(y+)/.test(fmt))
					fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				for (var k in o)
					if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[
						k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			}
			let _this = this
			this.timer = setInterval(() => {
				let now = new Date()
				this.time = now.Format('hh:mm:ss')
				this.date = now.Format('yyyy-MM-dd')
			}, 1000)
		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
			}
		},
		data() {
			return {
				codeSrc: '',
				userInfo: {
					'name': '胡图图',
					'idCard': '0000000000000'
				},
				time: '00:00',
				date: '1991-01-01'
			}
		}
	}
</script>

<style>
	.page {
		max-width: 1080px;
		/* overflow-x: hidden;
		height: 100%; */
		margin: 0px;
		padding: 0px;
	}
	.uni-icons{
		float: right;
		padding:10px
	}
	.content{
	    width: 100%;
	    height: 100%;
	}

	.content {
		background-color: #FFF;
	}

	.content .partOne {
		width: 100%;
		height: 174px;
	}

	.content .partTwo {
		margin-left: 35px;
		width: 80%;
		height: 60%;
		box-shadow: 2px 2px 6px rgb(130, 129, 129);
		/* border-top: 1px solid  rgb(130, 129, 129); */
	}

	.content .partTwo .up {
		padding-top: 10px;
		margin-left: 10px;
		/* border: 1px solid red; */
	}

	.content .partTwo .center {
		padding-top: 10px;
		text-align: center;
		color: #288DF8;
		display: flex;
		justify-content: space-around;
	}
</style>
